<template>
  <div class="xiaoqu">
    <div class="text1" style="margin-bottom: 20px">
      咨询师姓名:<input type="text" v-model="value01" style="height: 36px">
      擅长领域:<input type="text" v-model="value02" style="height: 36px">
      <el-button type="primary" @click="select" style="margin-left: 20px">搜索</el-button>
      <el-button type="primary"  @click="shujuclear(),dialogFormVisible = true">新增咨询师</el-button>
    </div>

    <!--增加弹框1-->
    <div>
      <el-dialog title="新增咨询师" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="头像" :label-width="formLabelWidth">
            <!-- <el-input v-model="form1.counselorHead" autocomplete="off"></el-input> -->
            <!-- 图片上传组件 -->
            <el-upload
                class="upload-demo"
                action="http://localhost:8081/file/upload"
                enctype="multipart/form-data"
                name="file"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="所属地区" :label-width="formLabelWidth">
            <el-input v-model="address001" placeholder="请填写详细地址"></el-input>
          </el-form-item>
          <el-form-item label="擅长领域" :label-width="formLabelWidth">
            <el-input v-model="form.shanchanglingyu" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="咨询师级别" :label-width="formLabelWidth">
            <el-select v-model="levelName" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.levelName"
                  :label="item.label"
                  :value="item.levelName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="咨询师介绍" :label-width="formLabelWidth">
            <el-input v-model="form.jieshao" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddate">确 定</el-button>
        </div>

      </el-dialog>
    </div>

    <!--   编辑弹框信息   --------------->
    <div>
      <el-dialog title="编辑咨询师" :visible.sync="dialogFormVisible4">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="头像" :label-width="formLabelWidth">
            <!-- <el-input v-model="form1.counselorHead" autocomplete="off"></el-input> -->
            <!-- 图片上传组件 -->
            <el-upload
                class="upload-demo"
                action="http://localhost:8081/file/upload"
                enctype="multipart/form-data"
                name="file"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="所属地区" :label-width="formLabelWidth">
            <el-input v-model="address001" placeholder="请填写详细地址"></el-input>
          </el-form-item>
          <el-form-item label="擅长领域" :label-width="formLabelWidth">
            <el-input v-model="form.shanchanglingyu" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="咨询师级别" :label-width="formLabelWidth">
            <el-select v-model="levelName" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.levelName"
                  :label="item.label"
                  :value="item.levelName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="咨询师介绍" :label-width="formLabelWidth">
            <el-input v-model="form.jieshao" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible4 = false">取 消</el-button>
          <el-button type="primary" @click="updatexinxi()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!------------------------------------------------------------------------------------------>
    <!--主页面表格-->
    <el-table
        :data="xiaoquList"
        border
        style="width: 1200px"
        color:black
        :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
      <el-table-column
          fixed
          prop="consultantId"
          label="ID"
          width="100">
      </el-table-column>
      <el-table-column
          fixed
          prop="consultantPhoto"
          label="头像"
          width="100">
        <template slot-scope="scope">
          <img :src="scope.row.consultantPhoto" style="width: 100%; height: auto;">
        </template>
      </el-table-column>
      <el-table-column
          prop="consultantName"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="region"
          label="地址"
          width="180">
      </el-table-column>
      <el-table-column
          prop="goodName"
          label="擅长领域"
          width="180">
      </el-table-column>
      <el-table-column
          prop="levelName"
          label="咨询师级别"
          width="180">
      </el-table-column>
      <el-table-column
          prop="consultantIntroduction"
          label="咨询师介绍"
          width="180">
      </el-table-column>
      <el-table-column
          label="操作"
          width="180">
        <template slot-scope="scope">
<!--          <el-button @click="handleClick(scope.row),looklook()" type="text" size="small">查看关联门店</el-button>-->
          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑咨询师</el-button>
          <el-button type="text" size="small" @click="handleClick1(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--页码-->
    <div class="block">
      <el-pagination
          layout="prev, pager, next"
          :total="1">
      </el-pagination>
    </div>
    <!--      小谈框-->
    <div>
      <el-dialog title="是否删除" :visible.sync="dialogFormVisible3">
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiaochuxian">取 消</el-button>
          <el-button type="primary" @click="deletexinxi">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "XiaoquComponent",
  data() {
    return {value01:'',
      value02:'',
      value1: '',
      value2: '',
      input:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      dialogFormVisible5:false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        shanchanglingyu:'',
        jieshao:''
      },
      formLabelWidth: '120px',
      xiaoquList:[],
      chakanxiaoquList:{},
      chakanxiaoquList1:{},
      addressAll: [],   //省市区
      address1:[], //你选择的地址
      address01:'',
      address001:'' ,
      location1:'',
      list1:{},
      addOrUpdateFlag:'',
      communityAddress:'',
      communityAreaCode:'',
      communityCity:'',
      communityCoordinates:'',
      communityDistrict:'',
      communityId:'',
      communityLatitude:'',
      communityLongitude:'',
      communityName:'',
      communityProvince:'',
      communityShopCount:'',
      communityStatus:'',
      communityUserCount:'',
      createTime:'',
      distance:'',
      shopIdArr:[],
      addguanlianname:'',
      communityId1:'',
      getids:[],
      options: [],
      levelName:'',
      file:'',
      fileList:[],
      consultantId:'',
      consultantName:'',
      region:'',
      areaName:'',
      consultantIntroduction:'',
      goodName:'',
      path:''
    }
  },
  created() {//默认请求全部商品
    this.getAllProvinceAndCityList();
    this.searchLevel();
    this.axios.request("/zixunshipage/consultantMessage", {params:{
        pageNum:1,
        pageSize:10,
      }}).then((res)=>{
      this.xiaoquList = res.data.data;
      console.log(
          this.xiaoquList
      )
      console.log(
          res
      )
    }).catch((err)=>{

    })
  },
  methods:{
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.path='';
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(response) {
      console.log(response);
      this.path=response;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleClick(row) {
      this.dialogFormVisible4 = true;
      console.log(row);
      this.consultantId=row.consultantId;
      this.consultantName=row.consultantName;
      this.region=row.region;
      this.areaName=row.goodName;
      this.levelName=row.levelName;
      this.consultantIntroduction=row.consultantIntroduction;

      this.form.name=row.consultantName;
      this.address001=row.region;
      this.form.shanchanglingyu=row.goodName;
      this.levelName=row.levelName;
      this.form.jieshao=row.consultantIntroduction;
    },
    handleClick1(row){
      this.dialogFormVisible3 = true;
      console.log(row);
      this.consultantId=row.consultantId;
      this.consultantName=row.consultantName;
      this.region=row.region;
      this.areaName=row.goodName;
      this.levelName=row.levelName;
      this.consultantIntroduction=row.consultantIntroduction;

    },
    shujuclear(){
      this.form.name='';
      this.address001='';
      this.form.shanchanglingyu='';
      this.levelName='';
      this.form.jieshao='';
    },


    xianshid4(){
      this.dialogFormVisible4 = true;
    },

    //  得到所有省份
    getAllProvinceAndCityList() {

      // 获取全国所有省份和城市的列表
      var that = this;
      this.$http
          .get("https://restapi.amap.com/v3/config/district", {
            // 高德地图的API
            params: {
              key: "7f73f1aeafb9ae63dcd6122b87ee79e5", // 这个是申请的 Key，读者自行写入
              keywords: "中国",
              subdistrict: 3,
              extensions: "base",
            },
          })
          .then((response) => {
            console.log(response.data)


            for(let i = 0;i<response.data.districts[0].districts.length;i++){
              let provinceMap = new Map();
              provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
              provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
              provinceMap.children = [];
              that.addressAll.push(provinceMap);  //添加省份
              for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
                let cityMap = new Map()
                cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
                cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
                cityMap.children = [];
                provinceMap.children.push(cityMap); //添加市
                for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
                  let areaMap = new Map()
                  areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
                  areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
                  cityMap.children.push(areaMap);   //添加区县
                }
              }
            }
          }).catch((err)=>{

      });
    },
    searchLevel() {
      this.$http.get("/zixunshipage/getConsultantLevelList").then((res) => {
        this.options = res.data.data;
      });
    },
    //模糊查询
    select(){
      this.axios.post("/zixunshipage/consultantMessageByName", {
          consultantName:this.value01,
          areaName:this.value02,
      }).then((res)=>{
        this.xiaoquList = res.data.data;
        console.log(
            this.xiaoquList
        )
        console.log(
            res
        )
      }).catch((err)=>{

      })

    },
    //获得坐标
    getlocation(){
      this.address01="";
      this.address01=this.address1.join("")+this.address001;
      this.axios.request("https://restapi.amap.com/v3/geocode/geo", {params:{
          key:"7f73f1aeafb9ae63dcd6122b87ee79e5",
          address: this.address01,
        }}).then((res)=>{
        this.location1 = res.data.geocodes[0].location;
      }).catch((err)=>{

      })

    },
    //添加小区数据
    adddate(){
      this.dialogFormVisible = false;
      this.axios.post("/zixunshipage/zixunshiAdd",{
        consultantName:this.form.name,
        region:this.address001,
        areaName:this.form.shanchanglingyu,
        levelName:this.levelName,
        consultantIntroduction:this.form.jieshao,
        path:this.path
      }).then((res)=>{
        console.log(res.data);
      }).catch((err)=>{

      });
      alert("添加成功");
      window.location.reload();
    },
    //      删除数据
    deletexinxi(){
      this.axios.post("/zixunshipage/zixunshiDelete",{
        consultantId:this.consultantId
      }).then((res)=>{
        console.log(res.data);
      }).catch((err)=>{

      });
      this.dialogFormVisible3 = false;
      alert("删除成功");
      window.location.reload();

    },
    open() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    quxiaochuxian(){
      this.dialogFormVisible3 = false;
      alert("已成功取消删除");
      window.location.reload();
    },
    updatexinxi(){
      this.dialogFormVisible4 = false;
      this.axios.post("/zixunshipage/zixunshiUpdate",{
        consultantId:this.consultantId,
        consultantName:this.form.name,
        region:this.address001,
        areaName:this.form.shanchanglingyu,
        levelName:this.levelName,
        consultantIntroduction:this.form.jieshao,
        path:this.path
      }).then((res)=>{
        console.log(res.data);
      });
      window.location.reload();
      alert("修改成功");
      this.shujuclear();


    },
    deleteci(){
      // console.log(this.communityId);
      // console.log(this.communityId1);
      this.axios.post("/associatedStores/associatedStoresRemove", {
        panghuCommunityId: this.communityId,
        panghuShopId:this.communityId1,

      }).then((res)=>{
        console.log(res.data);
      }).catch((err)=>{
      });
      this.dialogFormVisible2=false;


    },
    looklook(){
      this.form.name='';
      this.axios.request("/associatedStores/associatedStoresList",{params:{
          pageNum: 1,
          pageSize: 10,
          shopName: "",
          communityId:this.communityId
        }}).then((res)=>{
        this.chakanxiaoquList = res.data.data;

      }).catch((err)=>{

      });
      this.dialogFormVisible2 = true;
    },
    searchass(){
      this.axios.request("/associatedStores/associatedStoresList",{params:{
          pageNum: 1,
          pageSize: 10,
          shopName: this.form.name,
          communityId:this.communityId
        }}).then((res)=>{
        this.chakanxiaoquList = res.data.data;
      }).catch((err)=>{

      })
    },
    searchass1(){
      this.axios.request("/associatedStores/findShopListByAdd",{params:{

          pageNum: 1,
          pageSize: 10,
          shopName: this.addguanlianname,
          communityId:this.communityId
        }}).then((res)=>{
        this.chakanxiaoquList1 = res.data.data;
      }).catch((err)=>{

      })
    },
    addass(){
      this.dialogFormVisible5=true;
      this.axios.request("/associatedStores/findShopListByAdd",{params:{
          pageNum: 1,
          pageSize: 10,
          shopName: "",
          communityId:this.communityId
        }}).then((res)=>{
        this.chakanxiaoquList1 = res.data.data;

      }).catch((err)=>{

      });

    },

    change(shopId){
      this.shopIdArr.push(shopId);

    },
    addguanlianmendian(){
      this.dialogFormVisible3 = false;
      console.log(this.shopIdArr);
      console.log(this.communityId);
      this.axios.post("/associatedStores/addAssociatedStores", {
        fendeShopCommunityList: this.shopIdArr,
        panghuCommunityId: this.communityId
      }).then((res)=>{
        this.alladdAssociateCommunity = res.data.data;
        this.chakanxiaoquList = this.alladdAssociateCommunity.list;
        console.log(
            this.alladdAssociateCommunity
        )
      }).catch((err)=>{
      });
      this.dialogFormVisible5 = false;


      this.dialogFormVisible2 = true;


    },
    /*关联门店弹窗按钮绑定事件跳到表单*/
    toggleSelection() {
      console.log(this.tableData.total);
      this.axios.request("/associatedStores/findShopListByAdd", {
        params: {
          pageNum:1,
          pageSize: 10,
          shopName: '',
          communityId: this.communityId,
        }
      }).then((res) => {
        this.tableData = res.data.data;
      }).catch(() => {
      })

      this.dialogFormVisible5 = true;
    },
    /*关联门店表单管理分页处理*/
    handleCurrentChange1(page) {
      // 更新当前页码
      this.currentPage = page;
      // 重新加载数据
      this.toggleSelection();
    },
    /*获取选择门店的行数*/
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    /*保存关联门店*/
    baovunguanlian(){
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.getids.push(this.multipleSelection[i].shopId);
      };
      this.axios.post("/associatedStores/addAssociatedStores",{
        fendeShopCommunityList:this.getids,
        panghuCommunityId:this.communityId,
      }).then(() => {
        console.log("保存成功");
      }).catch(()=>{
        console.log("警告!!")
      })
      this.dialogFormVisible5 = false;
    },

  },

}
</script>
<style scoped>
.xiaoqu{
  height: 800px;
  /*background-color: red;*/
}
.txt1{
  line-height: 36px;
  text-align: center;
}
.box{
  text-align: center;
}

</style>